<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title><?php echo $this->get('site.title', 'MonAdmin管理系统'); ?></title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit">
    <link rel="shortcut icon" href="favicon.ico">
	<script>
		if (self != top) { parent.window.location.replace(window.location.href); }
	</script>
	<style>
		*{box-sizing:border-box;margin:0;padding:0;list-style:none;font:.8125rem/1.5 微软雅黑,Verdana,Helvetica,Arial,sans-serif;-box-sizing:border-box;}
		body,html{overflow:hidden;height:100%;}
		body{background:#333;background-size:cover;}
		.main{box-sizing:border-box;margin:108px auto;padding:20px;width:90%;max-width:420px;border-radius:4px;background-color:#fff;}
		.title{text-align:center;}
		.title h1{font-size:1.65rem;}
		.title p{font-size:1.125rem;}
		input[type=email],input[type=password],input[type=text]{padding:0 8px;width:100%;height:50px;outline:0;border:1px solid #dcdee0;border-radius:3px;color:#555;vertical-align:middle;font-size:.875rem;}
		input[type=email]:focus,input[type=password]:focus,input[type=text]:focus{border:1px solid #27a9e3;}
		input[type=button],input[type=submit]{display:inline-block;margin:0;padding:9pt 24px;width:100%;outline:0;border:none;border-radius:3px;background-color:#27a9e3;color:#fff;vertical-align:middle;text-align:center;white-space:nowrap;font-size:1.125rem;line-height:1.5rem;cursor:pointer;-webkit-appearance:none;}
		hr.hr15,hr.hr20{margin:0;padding:0;width:100%;border:none;}
		hr.hr15{height:15px;}
		hr.hr20{height:20px;}
		.verify-row{position:relative;overflow:hidden;}
		.verify-row .verify-img{position:absolute;top:1px;right:1px;}
	</style>
</head>

<body>
	<div class="main"">
		<div class=" title">
		<h1><?php echo $this->get('site.title', 'MonAdmin管理系统'); ?></h1>
		<p>用户登录</p>
	</div>
	<hr class="hr20">

	<form id="loginForm" action="" method="POST">
		<input name="username" required pattern="^[a-zA-Z0-9_]{3,16}$" oninvalid="setCustomValidity('请输入合法的用户名');"
			oninput="setCustomValidity('');" placeholder="用户名" type="text">
		<hr class="hr15">
		<input name="password" required minlength="6" maxlength="18" placeholder="密码" type="password">
		<hr class="hr15">
		<?php if(RUN_MODE != 'dev'): ?>
		<div class="verify-row">
			<input name="captcha" required maxlength="4" placeholder="验证码" type="text" autocomplete="off">
			<div class="verify-img">
				<img src="<?php echo $container->url->build('/admin/captcha'); ?>" onclick="recode()" id="verify-img" width="136" height="48" alt="captcha" />
			</div>
		</div>
		<hr class="hr15">
		<?php endif; ?>
		<input value="马上登录" style="width:100%;" type="submit">
	</form>
	</div>

	<script src="<?php echo $this->assets('/static/libs/layui/layui.js', ['v' => $site['version']]);?>"></script>
	<script>
		var loading = false;
		var captcha = '<?php echo (RUN_MODE != "dev") ? 1 : 0; ?>';
		window.onload = function () {
			layui.use(['layer'], function (layer) {
				var $ = layui.$;
				$('#loginForm').submit(function () {
					var form = $(this);
					if (loading) {
						return false;
					}
					loading = true;
					layer.load(2);

					$.ajax({
						url: '',
						data: form.serialize(),
						type: 'post',
						dataType: 'json',
						success: function (data) {
							layer.closeAll('loading');
							if (data.code == 1) {
								window.location.href = data.data.url;
							} else {
								layer.msg(data.msg);
								if (captcha == '1') {
									recode();
								}
							}
							loading = false;
						},
						error: function (xhr, code, resp) {
							// 请求错误回调
							layer.closeAll('loading');
							layer.alert('服务器繁忙，请稍后重试');
							loading = false;
						}
					});

					return false;
				})
			})
		}

		function recode() {
			var url = "<?php echo $container->url->build('/admin/captcha'); ?>" + '?r=' + Math.random();
			document.getElementById('verify-img').setAttribute('src', url)
		}
	</script>
</body>

</html>